import React, { Component } from 'react'
import img from '../../assets/img/pic1.png'
import img1 from '../../assets/img/pic2.png'
import img2 from '../../assets/img/pic3.png'
import img3 from '../../assets//img/pic6.png'
import img4 from '../../assets//img/pic7.png'
import img5 from '../../assets//img/pic8.png'
import img6 from '../../assets//img/pic9.png'
import img7 from '../../assets//img/pic10.png'
import img8 from '../../assets//img/pic11.png'
import img9 from '../../assets//img/biaoqian.png'
import './home.css'
import { Icon } from 'antd-mobile';
import { filterPrice } from '../../filters/index'
import { connect } from 'react-redux'
import { actions, getgetnew, getgroupon, getseck, getshowgoods ,getn} from '../../store/modules/home'
import {actions as deatilactions} from '../../store/modules/detail'
import { bindActionCreators } from 'redux'
class Home extends Component {
  componentDidMount() {
    let { home: { reqgetnew, reqgegroupon, reqseck, reqgoods } } = this.props;
    reqgetnew()
    reqgegroupon()
    reqseck()
    reqgoods()
  }
  render() {
    let { getnew, groupon, seck, goods ,home:{changen},n,detail:{reqlist},history} = this.props
    return (
      <>
        <div className='home'>
          <div className="home-top">
            <div className='box'>
              <img src={img} alt="" />
              <input type="text" placeholder='搜索商品' />
              <i className='iconfont icon-sousuo'></i>
              <button>搜索</button>
              <img src={img1} alt="" />
            </div>
          </div>
          <div className='home-bg'>
            <div className='home-xr'>
              <p>新人专享</p>
              <div className="time">
                <span>05:</span>
                <span>42:</span>
                <span>47</span>
              </div>
              <div className='home-r'>
                <button>查看全部</button>
                <Icon type='right' size='sm' />
              </div>
            </div>
            
            <div className="home-vv">
              <div className="home-bb">
                <span>1重礼</span>
                <span>信任特价商品专区（限量供应，先到先得）</span>
              </div>
              <div className="home-one">
                {getnew.map(item => {
                  return (
                    <div className="home-box" key={item.id}  onClick={()=>reqlist(item.id,history)}>
                      <img src={item.img} alt="" />
                      <div className='goche'> <img src={img2} alt="" /></div>
                      <div className="home-title">
                        <span>{item.price}</span>
                        <span>{item.market_price}</span>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
            <div className="home-two">
              <div className="home-bb">
                <span>2重礼</span>
                <span>新人通用50元李隽（下单立减，省了又省）</span>
              </div>
              <div className="home-img">
                <img src={img3} alt="" />
                <img src={img4} alt="" />
              </div>
            </div>
          </div>
          <div className='home-centernav'>
            <i>
              <img src={img5} alt="" />
              <p>限时秒杀</p>
            </i>
            <i>
              <img src={img5} alt="" />
              <p>畅销商品</p>
            </i>
            <i>
              <img src={img5} alt="" />
              <p>品质大牌</p>
            </i>
            <i>
              <img src={img5} alt="" />
              <p>小U自营</p>
            </i>
            <i>
              <img src={img5} alt="" />
              <p>积分商城</p>
            </i>
          </div>

          <div className='home-chaoji'>
            <div className="home-tou">
              <span>超级秒杀</span>
              <div className="time">
                <b>05</b><b>:</b>
                <b>42</b><b>:</b>
                <b>47</b>
              </div>
            </div>

            <div className='wanren'>
            {/* <div className='con'>

              <img src={groupon.img} alt="" />
              <div className="Super_boxr">
                <p> <i>7.9折 </i> {groupon.goodsname}</p>
                <div className="Super_boxrt">
                  <span>￥{groupon.price}</span>
                  <span>{groupon.market_price}</span>
                </div>
              </div>
              </div> */}
              {
              groupon.map(item=>(
                <div className='con' key={item.id} >
              <img src={item.img} alt="" />
              <div className="Super_boxr">
                <p> <i>7.9折 </i> {item.goodsname}</p>
                <div className="Super_boxrt">
                  <span>￥{item.price}</span>
                  <span>{item.market_price}</span>
                  <span>马上抢</span>
                </div>
              </div>
              </div>
              ))
            }
            </div>
          </div>

          <div className="home-seck">
            <div className="home-bb">
              <span>限时秒杀</span>
              <span>信任特价商品专区（限量供应，先到先得）</span>
            </div>
            <div className="home-one">
              {seck.map(item => {
                return (
                  <div className="home-box" key={item.id} onClick={()=>reqlist(item.id,history)}>
                    <img src={item.img} alt="" />
                    <div className='goche'> <i className='iconfont icon-Shapecopy'></i></div>
                    <div className="home-title">
                      <span>{item.price}</span>
                      <span>{filterPrice(item.market_price)}</span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
          <div className="shaung11">
            <div className="shaung11l">
              <h4>双11尖货预约</h4>
              <img src={img6} alt="" />
            </div>
            <div className="shaung11r">
              <h4>畅购全球</h4>
              <img src={img7} alt="" />
              <img src={img8} alt="" />
            </div>
          </div>

          <div className='home-nav'>
            <ul>
              <li onClick={()=>changen(0)} className={n===0?'select':''}>综合推荐</li>
              <li onClick={()=>changen(1)} className={n===1?'select':''}>销量</li>
              <li onClick={()=>changen(2)} className={n===2?'select':''}>价格</li>
              <li onClick={()=>changen(3)} className={n===3?'select':''}>好评度</li>
            </ul>
          </div>
          <div className='navcon'>

            {/* <div className='conlist'>
              <img src="" alt="pic" />
              <div className='wenzi'>
                <p> <i>7.9折 </i> 女搜到女德班安慰和反而更</p>
                <div className='bottom'>
                  <div className='fl'>
                    <span>&yen; 999</span>
                    <span>&yen; 999</span>
                  </div>
                  <div className='fr'>
                    <button>加入购物车</button>
                  </div>
                </div>
              </div>
            </div> */}

            {
              goods?
              goods.content.map(item=>(
              <div className='conlist' key={item.id} onClick={()=>reqlist(item.id,history)}>
              <img src={item.img} alt="pic" />
              <div className='wenzi'>
                <p> <i>7.9折 </i>{item.goodsname}</p>
                <div className='img'>
                  <img src={img9} alt=""/>
                  <p>直降198</p><p>限购1件</p>
                </div>
              
                <div className='bottom'>
               
                  <div className='fl'>
                    <span>&yen; {item.price}</span>
                    <span>&yen; {item.market_price}</span>
                  </div>
                  <div className='fr'>
                    <button>加入购物车</button>
                  </div>
                </div>
              </div>
            </div>)):null
            }
          </div>
        </div>
      </>
    )
  }
}

let mapStateToProps = state => ({
  getnew: getgetnew(state),
  groupon: getgroupon(state),
  seck: getseck(state),
  goods: getshowgoods(state),
  n:getn(state)
})
let mapDispatchToProps = dispatch => ({
  home: bindActionCreators(actions, dispatch),
  detail:bindActionCreators(deatilactions,dispatch)
})
export default connect(mapStateToProps, mapDispatchToProps)(Home)